<script setup>
import HomePanel from '../Home/components/HomePanel.vue'
import { getOrderAPI } from '@/apis/pay'
import { getGoodsAPI } from '@/apis/home.js'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const orderInfo = ref({})

const getOrderInfo = async () => {
	const res = await getOrderAPI(route.query.orderId)
	orderInfo.value = res.result
}

// 猜你喜欢列表
const productList = ref([])
const getProductList = async () => {
	const res = await getGoodsAPI({ pageNum: 1, pageSize: 16 })
	// productList.value = res.result

	productList.value = res.data.list.reduce((a, b) => {
		// 把嵌套在店铺里的商品列表提出来
		return a.spus ? a.spus.concat(b.spus) : b.spus
	}, [])
	// console.log(productList.value)
}

const handleCheck = () => {
	router.push({
		path: '/order'
	})
}

onMounted(() => getProductList())
</script>


<template>
	<div class="xtx-pay-page">
		<div class="pay-result">
			<!-- 路由参数获取到的是字符串而不是布尔值 -->
			<div class="iconfont icon-queren2 red"></div>
			<p class="tit">支付成功</p>
			<p class="tip">收货完成后评价并分享至（微信、抖音…）</p>
			<p class="tip">即可获得瓶盖奖励</p>
			<div class="btn" @click="handleCheck">查看订单</div>
		</div>
		<div class="product-box">
			<!-- <div class="item" v-for="item in productList" :key="item.spuId"> -->
			<HomePanel class="item" v-for="item in productList" :key="item.spuId" :shopData="item"> </HomePanel>
			<!-- </div> -->
		</div>
	</div>
</template>

<style scoped lang="scss">
.xtx-pay-page {
	background-color: #f4f4f4;
	padding: 0 160px 30px;
	min-height: calc(100vh - 151px);
	.pay-result {
		padding: 30px 0;
		background: #fff;
		text-align: center;
		// margin-top: 20px;

		> .iconfont {
			font-size: 100px;
			margin: auto;
		}

		.red {
			color: $xtxColor;
		}

		.tit {
			font-size: 24px;
			margin-bottom: 20px;
		}

		.tip {
			font-size: 14px;
			color: #999999;
			line-height: 21px;
		}

		p {
			line-height: 40px;
			font-size: 16px;
		}

		.btn {
			cursor: pointer;
			margin: auto;
			margin-top: 20px;
			width: 104px;
			height: 40px;
			border: 1px solid $xtxColor;
			font-size: 14px;
			color: $xtxColor;
			line-height: 40px;
			border-radius: 20px;
		}
	}
	.product-box {
		margin-top: 30px;
		.item {
			display: inline-block;
			// margin-right: 27px;
			background-color: #fff;
			.panel-skuImage {
				background: #fff !important;
			}
		}
	}
}
</style>